import React from 'react';
import { t } from '@lingui/macro';
import { DatePicker } from '@alifd/next';
import styles from './ChartRangePicker.module.scss'
import TotalPrice from './TotalPrice';

const { RangePicker } = DatePicker;

interface RangePickerProps {
  text: string; // 选择器标题文字
  handleOnChange: (value: any[]) => void; // onChange事件
  pickerProps: any, // RangePicker内置api
  prises: Array<Object>;
}
/**
 * 时间选择器组件封装
 * @param param text: 选择器文字
 * @param param handleOnChange: onChange事件回调
 * @return
 */
const ChartRangePicker: React.FC<RangePickerProps> = ({ text, handleOnChange, prises, ...pickerProps }) => {
  return (
    <div className={styles.chart_container}>
      <span className={styles.chart_span}>{t`${text}`}</span>
      {prises && <TotalPrice prices={prises} />}
      <RangePicker className={styles.chart_RangePicker} onChange={handleOnChange} {...pickerProps} />
    </div>
  );
}

export default ChartRangePicker;
